<template>
  <div class="side-menu sidebar-inverse">
    <nav class="navbar navbar-default" role="navigation">
      <div class="side-menu-container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <div class="icon fa fa-paper-plane"></div>
            <div class="title">Flat Admin V.2</div>
          </a>
          <button type="button" class="navbar-expand-toggle pull-right visible-xs">
            <i class="fa fa-times icon"></i>
          </button>
        </div>
        <ul class="nav navbar-nav">
          <template v-for="list in menuList">
            <li class="{{list.active}}" v-if="list.childrens.length==0">
              <a v-link="{ path: list.urls}">
                <span class="icon fa fa-tachometer"></span><span class="title">{{list.name}}</span>
              </a>
            </li>
            <li class="panel panel-default dropdown {{list.active}}" v-if="list.childrens.length!=0">
              <a data-toggle="collapse" href="#{{$index}}">
                <span class="{{list.classStyle}}"></span><span class="title">{{list.name}}</span>
              </a>
              <div id="{{$index}}" class="panel-collapse collapse">
                <div class="panel-body">
                  <ul class="nav navbar-nav">
                    <li v-for="children in list.childrens">
                      <a  v-link="{ path: children.urls}">{{children.name}}</a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>

          </template>

        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </nav>
  </div>
</template>
<script>
  export default{
    props: ['menuList'],
    data(){
      return {}
    },
  }
</script>
